// 达人榜
<template>
<div>
    <img class="pagebg" src="https://youyang-cdn.mdshuzhi.com/upload/drb_bg.png" />

    <div class="default">
        <div class="search">
            <img class="icon" src="https://youyang-cdn.mdshuzhi.com/upload/icon_seach2.png" />
            <input type="text" class="search-text" placeholder-class="placeholder" placeholder="搜索" @click="tosearch" />
        </div>
        <div class="title">
            达人榜
            <div class="share" @click="share"></div>
            <img class="like" :src="isCheckCollect?'https://youyang-cdn.mdshuzhi.com/upload/icon_like_new@2x.png':'https://youyang-cdn.mdshuzhi.com/upload/icon_like.png'" @click="like" />
        </div>
        <div class="detail" v-if="appinfodata.content" v-html="appinfodata.content"></div>
        <router-link class="info" v-if="userInfos" :to="'/TalentOther?id='+userInfos.id" tag="div">
            <div class="top">
                <img class="aver" :src="userInfos.portrait" />
                <div class="name">{{userInfos.nick}}</div>
                <div class="level">{{userInfos.vipLevel==0?'普通用户':'LV.'+userInfos.vipLevel}}</div>
            </div>
            <div class="bottom">
                <div class="item">
                    <div class="nums">{{userInfos.weekRank}}</div>
                    <div class="n">周排名</div>
                </div>
                <div class="item">
                    <div class="nums">{{userInfos.monthRank}}</div>
                    <div class="n">月排名</div>
                </div>
                <div class="item">
                    <div class="nums">{{userInfos.listenTimes  | toHour}}</div>
                    <div class="n">总时长（{{listen}}）</div>
                </div>
            </div>
        </router-link>
    </div>
    <div
      class="lists"
      ref="lists"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="1">
        <div class="top" :class="isFixedTop ? 'topfix':''" ><!-- :style="{'margin-top': (isFixedTop ? navHeight+'px':'')}" -->
            <div class="myposition" @click="myposition">{{mypositionbool?'我的排名':'回到顶部'}}</div>
            <div class="item" :class="ismoth?'':'on'" @click="datechange">月榜</div>
            <div class="item" :class="ismoth?'on':''" @click="datechange">周榜</div>
        </div>
        <div class="top_blank" v-if="isFixedTop"></div>
        <div class="con" v-if="rankPagedata.length>0">
            <router-link :to="'/TalentOther?id='+item.userId" v-for="(item,index) in rankPagedata" :key="index" class="item" ref="myposition" tag="div" :class="item.userId==userInfos.id?'on myposition':''">
                <div class="key">
                    <img v-if="index==0" src="https://youyang-cdn.mdshuzhi.com/upload/tag_top1.png" />
                    <img v-if="index==1" src="https://youyang-cdn.mdshuzhi.com/upload/tag_top2.png" />
                    <img v-if="index==2" src="https://youyang-cdn.mdshuzhi.com/upload/tag_top3.png" />
                </div>
                <div class="pic">
                    <img :src="item.portrait" />
                    <div class="follow" v-if="item.followed!=1 && item.userId!=userInfos.id" @click="follow(item.userId,index)"></div>
                </div>
                <div class="right">
                    <div class="name">
                        <span class="n">{{item.nick}}</span>
                        <span class="level">{{item.vipLevel==0?'普通用户':'LV.'+item.vipLevel}}</span>
                        <span class="my" v-if="item.userId==userInfos.id">我</span>
                    </div>
                    <div class="nums">周时长:{{item.c | toHour}} | 总时长:{{item.listenTimes | toHour}}</div>
                </div>
                <div class="btn" @click.stop="playall(item.userId)" v-if="item.userId!=userInfos.id">听TA</div>
                <router-link :to="'/TalentOther?id='+item.userId" v-else>
                    <div class="btn">查看</div>
                </router-link>
            </router-link>
            <div class="empty" v-if="isEnd">没有更多了~</div>
        </div>
    </div>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import url from "@/router/http_conf.js"
import {
    Toast
} from "mint-ui";

export default {
    data() {
        return {
            mode: 1,
            play: 1,
            ismoth: true,
            albumnavcurrent: 0,
            page: 1,
            pageSize: 10,
            type: 1,
            myRankdata: "",
            rankPagedata: [],
            isEnd: false,
            userInfos: "",
            appinfodata: "",
            mypositionbool: true,
            rank: 0,
            isFixedTop: false,
            navHeight: 66,
            isCheckCollect: null, //检测是否点赞收藏返回来的id
            searchVal: "",
            imgUrl: url,
            listen:'小时'
        };
    },
    created(){
      window.addEventListener("scroll", this.gomy,true);
    },
    mounted() {
        if (!localStorage.getItem("token")) {
            // app.ToLogin()
            //条到登录页
        } else {
            this.myRank();
            this.myRank(2);
            this.userInfos = localStorage.getItem("userInfo");
        }
        this.getUserInfos();
        this.rankPage();
        this.appinfo();
        // 检测收藏
        this.checkCollect();
    },
    destroyed(){
      window.removeEventListener("scroll", this.gomy,true)
    },
    methods: {
        //跳转到播放页
        playall(userId) {
            console.log("playall");
            // app.globalData.currentIndex = 0;
            this.$router.push({
                path: "/Playing?&talentUserId=" + userId,
            });
        },
        // 跳转到搜索页
        tosearch() {
            this.$router.push({
                name: "TalentSearch",
            });
        },
        // 跳转到音频分享海报页
        share() {
            this.$Share("", 4, "达人榜",'',this.$route.fullPath);
        },
        // 音频描述
        appinfo() {
            controller
                .info({
                    key: "key-rank-desc",
                })
                .then((res) => {
                    this.appinfodata = res.baseData;
                });
        },
        // 收藏按钮
        like() {
            let that = this;
						console.log(this.isCheckCollect)
            if (that.isCheckCollect) {
                that.delCollect(that.isCheckCollect);
            } else {
                that.addCollect();
            }
        },
        // 添加收藏 --达人榜的添加收藏传0
        addCollect() {
            controller
                .collect({
                    type: 4,
                    rid: 0,
                    bodyId: 0,
                })
                .then((res) => {
                    this.$updateScore(9)
                    console.log("添加收藏", res);
                    this.checkCollect();
                });
        },
        // 取消收藏
        delCollect(ids) {
            controller
                .delCollect({
                    ids,
                })
                .then((res) => {
                    console.log("取消收藏", res);
                    this.checkCollect();
                });
        },
        // 检测是否点赞收藏 rid传个0
        checkCollect() {
            controller
                .checkCollect({
                    type: 4,
                    rid: 0,
                    token: localStorage.getItem("token"),
                })
                .then((res) => {
                    console.log("检测是否点赞收藏", res);
                    this.isCheckCollect = res.data.baseData;
                });
        },
        // 最新和最hot
        datechange() {
            this.ismoth = !this.ismoth;
            this.type = this.ismoth ? 1 : 2;
            this.page = 1;
            this.pageSize = 10;
            this.rankPagedata = [];
            this.mypositionbool = true;
            this.rankPage();
        },
        // 关注别人的方法
        follow(id, index) {
            controller
                .follow({
                    followedUserId: id,
                })
                .then((res) => {
                    console.log("then", res);
                    Toast({
                        message: "关注成功！",
                        duration: 1500,
                    });
                    this.rankPagedata[index].followed = 1;
                    this.rankPagedata = this.rankPagedata;
                })
                .catch((res) => {
                    console.log("catch", res);
                    if ((res.code = -1)) {
                        this.rankPagedata[index].followed = 1;
                        this.rankPagedata = this.rankPagedata;
                    }
                });
        },
        // 获取用户信息
        getUserInfos() {
            let that = this;
            controller
                .getUserInfo({
                    token: localStorage.getItem("token"),
                })
                .then((res) => {
                    console.log("获取用户信息", res);
                    let userInfos = res.baseData;
                    // userInfos.listenTimes = (userInfos.listenTimes / 60 / 60).toFixed(2);
                    this.toHour(userInfos.listenTimes)
                    const isImgUrl =  userInfos.portrait.indexOf("http") != -1
                    userInfos.portrait = isImgUrl ? userInfos.portrait : that.imgUrl + userInfos.portrait;
                    this.userInfos = userInfos;
                    localStorage.setItem("userInfo", JSON.stringify(userInfos));
                });
        },
        toHour(seconds,type) {
            if (!seconds) return 0;
              seconds=Number(seconds)
              if(seconds<3600){
                var mins=(seconds/60).toFixed(2)?(seconds/60).toFixed(2):1
                type=type?type:'m'
                this.listen='分钟'
              }else{
                var hour=(seconds/60/60).toFixed(2)
                type=type?type:'h'
                this.listen='小时'
              }

        },
        collect() {
            controller
                .rankPage({
                    page: this.page,
                    pageSize: this.pageSize,
                    type: this.type,
                })
                .then((res) => {
                    if (
                        res.baseData &&
                        res.baseData.list &&
                        res.baseData.list.length > 0
                    ) {
                        this.rankPagedata = this.rankPagedata.concat(res.baseData.list);
                        this.isEnd = res.baseData.lastPage ? true : false;
                    }
                });
        },
        //列表分页
        loadMore() {
          if(this.isEnd){
            return
          }
          if(this.rankPagedata.length>0){
            this.page += 1;
            this.rankPage();
          }
        },
        // 排行榜
        rankPage() {
            controller
                .rankPage({
                    page: this.page,
                    pageSize: this.pageSize,
                    type: this.type,
                })
                .then((res) => {
                    if (
                        res.baseData &&
                        res.baseData.list &&
                        res.baseData.list.length > 0
                    ) {
                        for (let item of res.baseData.list) {
                            item.followed = 0;
                        }
                        if(this.page == 1){
                          if(this.pageSize > 10){
                            this.rankPagedata = res.baseData.list
                            this.isEnd = res.baseData.lastPage ? true : false;
                            return
                          }
                        }
                        this.rankPagedata = this.rankPagedata.concat(res.baseData.list);
                        this.isEnd = res.baseData.lastPage ? true : false;
                    }
                })
                .catch((res) => {
                    if ((res.code = 101)) {}
                });
        },
        myRank(type) {
            var Ttype = this.type || 1;
            if (type) {
                Ttype = type;
            }
            controller
                .myRank({
                    type: Ttype,
                })
                .then((res) => {
                    this.myRankdata = res.baseData;
                    if (Ttype == 1) {
                        this.weekrank = res.baseData.rank;
                    }
                    if (Ttype == 2) {
                        this.mothrank = res.baseData.rank;
                    }
                })
                .catch((res) => {
                    if ((res.code = 101)) {}
                });
        },
        gomy() {
          if(this.$refs.lists){
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const listsOffsetTop = this.$refs.lists.offsetTop
            if(scrollTop >= listsOffsetTop){
              this.isFixedTop = true
              this.mypositionbool = false
            }else if(scrollTop < listsOffsetTop){
              this.isFixedTop = false
              this.mypositionbool = true
            }
          }
        },
        myposition() {
            // console.log('切换')
            if (!localStorage.getItem("token")) {
                // app.ToLogin()
            } else {
              if(this.$refs.lists){
                const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                const listsOffsetTop = this.$refs.lists.offsetTop
                if(scrollTop <= listsOffsetTop){
                  window.scrollTo(0,listsOffsetTop) || document.body.scrollTo(0,listsOffsetTop);
                }
              }
              this.mypositionbool = !this.mypositionbool;
              var rank = 0;
              if (this.myRankdata && this.myRankdata.rank) {
                  rank = Number(this.myRankdata.rank);
              }
              if (this.mypositionbool) {
                window.scrollTo(0,0) || document.body.scrollTo(0,0);
                this.page = 1;
                this.pageSize = 100;
                this.rankPagedata = []
                this.rankPage();
              } else {
                if(this.pageSize < 100){
                  this.page = 0
                }else{
                  this.page = 1
                }
                this.pageSize = rank > 19 ? (rank - 19)+100 : 100
                if(this.pageSize != 100 && this.rankPagedata.length >= 100){
                  this.rankPagedata = []
                  this.rankPage();
                }
              }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.pagebg {
    position: absolute;
    top: -180px;
    max-width: 960px;
    margin: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 646px;
    background-color: #fff;
    z-index: -1;
}
.default {
    padding: 24px;

    .search {
        width: 100%;
        position: relative;
        margin-bottom: 70px;
        color: #fff;
        text-align: center;

        .icon {
            width: 28px;
            height: 28px;
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 48px;
            margin: auto;
        }

        .search-text {
            width: 100%;
            padding: 0 24px 0 90px;
            height: 64px;
            background: rgba(0, 0, 0, 0.12);
            border-radius: 8px;
            font-size: 28px;
            color: #fff;
            border: none;
            box-sizing: border-box;
            text-align: left;
        }

        input::-webkit-input-placeholder {
            color: #fff;
        }
    }

    .title {
        font-weight: 700;
        color: #fff;
        font-size: 68px;
        line-height: 1.2;
        margin-bottom: 20px;

        .share {
            background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_share3.png) no-repeat center center;
            background-size: 100%;
        }
    }

    .detail {
        font-size: 24px;
        color: #fff;
        margin-bottom: 70px;
    }

    .info {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        padding: 24px;

        .top {
            overflow: hidden;
            margin-bottom: 60px;
            line-height: 64px;

            .aver {
                width: 64px;
                height: 64px;
                background-color: #eee;
                border-radius: 50%;
                margin-right: 15px;
                float: left;
            }

            .name {
                font-size: 32px;
                color: #323232;
                float: left;
            }

            .level {
                font-size: 20px;
                margin-left: 10px;
                display: inline-block;
                height: 28px;
                line-height: 28px;
                text-align: center;
                padding: 5px 10px 0;
                border: 1px solid rgba(168, 172, 187, 1);
                border-radius: 14px;
            }
        }

        .bottom {
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 20px;
            color: #999;

            .nums {
                font-size: 44px;
                color: #333;
            }
        }
    }
}

.default .title .share,
.default .title .like {
    width: 36px;
    height: 36px;
    margin-left: 25px;
    vertical-align: bottom;
    display: inline-block;
}

.lists {
    overflow: hidden;
    position: relative;
    z-index: 10;
    background-color: #fff;

    .top {
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        font-size: 24px;
        padding: 32px 0;
        position: relative;

        .item {
            float: right;
            padding: 0 24px;
            position: relative;
            color: #a8acbb;

            &:last-child::after {
                content: "";
                width: 4px;
                height: 36px;
                background-color: #f2f2f2;
                position: absolute;
                top: 50%;
                right: 0;
                margin-top: -18px;
            }
        }

        .on {
            color: #e66d4d;
        }

        .myposition {
            float: left;
            margin-left: 24px;
            width: 144px;
            height: 46px;
            border: 1px solid rgba(168, 172, 187, 1);
            border-radius: 24px;
            text-align: center;
            line-height: 46px;
            font-size: 26px;
            color: #a8acbb;
        }
    }

    .topfix {
        position: fixed;
        min-width: 640px;
        max-width: 960px;
        margin: 0 auto;
        z-index: 11;
        left: 0;
        top: 0;
        right: 0;
        margin: auto;
        background-color: #FFFFFF;
        box-shadow: 2px 0px 20px 10px #dddddd;
    }

    .con {
        .item {
            padding: 16px 24px;
            overflow: hidden;
            position: relative;

            &:hover {
                background-color: #f6f6fa;
            }
        }

        .on {
            background-color: #f1f1f1;
        }

        .key {
            width: 36px;
            height: 88px;
            margin-right: 20px;
            float: left;
            color: #a8acbb;
            font-size: 20px;
            line-height: 88px;

            img {
                width: 36px;
                height: 36px;
            }
        }

        .pic {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-right: 24px;
            float: left;
            background-color: #eee;
            position: relative;

            img {
                border-radius: 100%;
                width: 100%;
                height: 100%;
                position: relative;
                z-index: 2;
                background-color: #eee;
            }

            .follow {
                width: 28px;
                height: 28px;
                position: absolute;
                z-index: 10;
                bottom: 0;
                right: 0;
                background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_follow.png) no-repeat center center;
                background-size: 100%;
            }
        }

        .right {
            overflow: hidden;
        }

        .name {
            color: #323232;
            font-size: 30px;
            margin-bottom: 15px;
            padding-right: 150px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .nums {
            color: #a8acbb;
            font-size: 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .btn {
            width: 132px;
            height: 52px;
            border: 2px solid #ec7169;
            border-radius: 26px;
            text-align: center;
            line-height: 52px;
            color: #ec7169;
            font-size: 30px;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 12px;
            margin: auto;
            z-index: 1;
        }

        .level {
            font-size: 20px;
            margin-left: 10px;
            display: inline-block;
            height: 28px;
            line-height: 28px;
            text-align: center;
            padding: 5px 10px 0;
            border: 1px solid rgba(168, 172, 187, 1);
            border-radius: 14px;
        }

        .my {
            color: #fff;
            min-width: 40px;
            font-size: 20px;
            margin-left: 10px;
            display: inline-block;
            height: 28px;
            line-height: 28px;
            text-align: center;
            padding: 0 10px;
            background: rgba(230, 109, 77, 1);
            border-radius: 14px;
        }
    }
}

.empty {
    text-align: center;
    color: #a8acbb;
    font-size: 28px;
    padding: 60px 0;
}

.top_blank {
    height: 110px;
}
</style>
